<template>
  <van-tabbar v-model="active" @change="onChange">
    <van-tabbar-item
      v-for="(item,index) in tabData"
      :key="index" :icon="item.icon">
      {{item.name}}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { mapActions  } from 'vuex'
export default {
  data() {
    return {
      active: 0,
      tabData: [
        { name: '首页', icon: 'home-o', link: '/home' },
        { name: '门店', icon: 'shop-collect-o', link: '/store' },
        { name: '消息', icon: 'chat-o', link: '/message' },
        { name: '我的', icon: 'user-o', link: '/user' },
      ]
    }
  },
  computed: {
    tabIndex() {
      const localTabIndex = localStorage.getItem('currentTabIndex')
      return parseInt(localTabIndex) || this.$store.state.tabIndex
    }
  },
  mounted() {
    this.active = this.tabIndex
  },
  methods: {
    ...mapActions(['setTabIndex']),
    onChange(index) {
      this.active = index
      localStorage.setItem('currentTabIndex', index)
      const toPath = this.tabData[index].link
      this.setTabIndex(index)
      this.$router.push({path: toPath})
    }
  }
}
</script>
